<template>
  <div>
    <el-row>
      <el-button type="primary" @click="doadd()">添加用户</el-button>
    </el-row>
    <el-row>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column prop="name" label="姓名" align="center" width="150"></el-table-column>
        <el-table-column prop="phone" label="联系方式" width="150"></el-table-column>
        <el-table-column prop="role.roleName" label="职位" width="150"></el-table-column>

        <el-table-column fixed="right" label="操作" width="550">
          <!-- slot-scope="scope" -->
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" @click="doDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-row style="height:10%">
      <el-col :span="24">
        <div class="block">
          <!-- <span class="demonstration">完整功能</span> -->
          <el-pagination
            background
            :page-sizes="[5, 10, 15]"
            @prev-click="prevPage"
            @next-click="nextPage"
            @current-change="currentPage"
            @size-change="changePage"
            :page-size="pageSize"
            :current-page="pageNum"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="添加员工" :visible.sync="addUser">
      <el-row>
        <el-col :span="10" align="center">
          <el-form>
            <el-form-item label="员工姓名" label-width="85px">
              <el-input v-model="insertUser.name" placeholder="请输入用户姓名"></el-input>
            </el-form-item>
            <el-form-item label="员工账号" label-width="85px">
              <el-input v-model="insertUser.userName" placeholder="请输入用户账号"></el-input>
            </el-form-item>
            <el-form-item label="员工密码" label-width="85px">
              <el-input v-model="insertUser.passwd" placeholder="请输入用户密码"></el-input>
            </el-form-item>
            <el-form-item label="员工手机号" label-width="85px">
              <el-input v-model="insertUser.phone" placeholder="请输入用户手机号"></el-input>
            </el-form-item>

            <el-form-item label="身份" label-width="85px">
              <el-select v-model="insertUser.role.id" placeholder="请输入用户身份">
                <el-option
                  v-for="item in ident"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div slot="footer">
        <el-button @click="addUser = false">取 消</el-button>
        <el-button type="primary" @click="addsure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
        ident:[
        {value: '',
        label: ''}, 
        {value: 1,
        label: '老板'}, 
        {value: 2,
        label: '财务部'}, 
        {value: 3,
        label: '运营部'},  
      ],
      insertUser: {
        name:"",
        userName: "",
        passwd: "",
        phone: "",
        enterpriseId: localStorage.getItem("enterpriseId"),
        role: {
          id: ""
        }
      },
      addUser: false,
      checked: false,
      total: 0,
      pageNum: 1,
      pageSize: 5,
      name: "",
      cardNumber: "",
      gymId: 0,
      status: 0,
      dialogFormVisible: false,
      dialogFormVisibleModify: false,
      multipleSelection: [],
      dialogform: [
        {
          cardNumber: "",
          name: "",
          balance: ""
          // createTime: '',
        }
      ],
      dialogformAdd: [
        {
          cardNumber: "",
          name: "",
          balance: ""
          // createTime: '',
        }
      ],

      tableData: []
    };
  },
  methods: {
    addsure(){
      console.log(this.insertUser)
      if(this.insertUser.role.id == ''){
        this.$message({
          message:'请补全信息！',
          type:'warning'
        })
      }else{
        this.$axios.post('api/finance/user/insertUserInfo',this.insertUser,{headers:{'jwt':localStorage.getItem('jwt')}})
        .then(res =>{
          console.log(res.data)
          if(res.data.code == 200){
            this.$message({
              message:'添加成功',
              type:'success'
            })
            this.addUser = false
            this.queryBtn();
          }
        })
      }

    },
    doadd() {
      this.addUser = true;
    },
    batchDelete() {
      let totalIds = [];
      this.multipleSelection.forEach(e => {
        totalIds.push(e.id);
      });
      // alert(totalIds)
      if (totalIds.length == 0) {
        // alert("请选择好需要删除的数据再来~")

        this.$message({
          message: "请选择好需要删除的数据再来~",
          type: "warning"
        });
        return;
      }
      console.log(totalIds);
      let jwt = localStorage.getItem("jwt");
      this.$axios
        .post("api/finance", totalIds, { headers: { jwt: jwt } })
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            alert("删除完成");
            this.queryBtn();
          }
          if (res.data.code == 666) {
            alert("无删除权限");
            this.queryBtn();
          }
        });
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    doDelete(row) {
      let jwt = localStorage.getItem("jwt");
      console.log(row.id);
      this.$axios
        .get("/api/finance/bill/removeBillById?id=" + row.id, {
          headers: { jwt: jwt }
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            alert("删除完成");
            this.queryBtn();
          }
          if (res.data.code == 666) {
            alert("无删除权限");
            this.queryBtn();
          }
        });
    },

    updateData2() {
      this.dialogFormVisible = true;
    },
    prevPage(val) {
      this.pageNum = val;

      this.queryBtn();
    },

    nextPage(val) {
      this.pageNum = val;

      this.queryBtn();
    },
    changePage(val) {
      // alert(val)
      this.pageNum = 1;
      this.pageSize = val;
      this.queryBtn();
    },
    currentPage(val) {
      // alert(val)
      this.pageNum = val;
      this.queryBtn();
    },
    queryBtn() {
      // alert(this.pageSize + "," + this.pageNum);
      let jwt = localStorage.getItem("jwt");
      console.log("queryBtn这里的jwt为:" + jwt);
      let param = {};
      param.pageNum = this.pageNum;
      param.pageSize = this.pageSize;
      let enterpriseId = localStorage.getItem("enterpriseId");
      console.log("当前的企业id为" + enterpriseId);
      let data = {};

      data.enterpriseId = enterpriseId;
      param.data = data;

      this.$axios
        .post("api/finance/user/findAllUserByEnterpriseId", param, {
          headers: { jwt: jwt }
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            let pageData = res.data.data;
            this.tableData = res.data.data.list;
            this.pageNum = pageData.pageNum;
            this.pageSize = pageData.pageSize;
            this.total = pageData.total;
          }
        });
    },
    doChecked(row) {
      this.checked = true;
      console.log(row);
    }
  },
  created() {
    this.queryBtn();
  }
};
</script>

<style scoped></style>